<template>
	<view class="container">
		<view style="margin-top: 278rpx">
			<view class="logo-box">
				<view class="header-title">
					<view>重置密码</view>
					<view class="tips">重置/找回密码</view>
				</view>
				<view v-if="tab == 0">
					<view class="input-box" style="margin-bottom: 40rpx">
						<view class="input-title">
							<image src="/static/images/common/phone1.png"></image>
							<view>+86</view>
						</view>
						<input type="number" v-model="Phone" maxlength="11" placeholder="请输入手机号" placeholder-class="input-holder" />
					</view>
					<view class="input-box captcha-box">
						<input type="text" v-model="captchaCode" maxlength="4" placeholder="请输入图形验证码" placeholder-class="input-holder" />
						<image :src="captchaImage" class="captcha-image" @tap="GetCaptcha"></image>
					</view>
					<view class="input-box" style="justify-content: space-between">
						<input type="number" v-model="code" maxlength="11" placeholder="请输入验证码" placeholder-class="input-holder" />
						<view class="get_SMCode" @tap="sendSmsCode" v-if="DaoJS == 0">获得验证码</view>
						<view class="get_SMCode" v-else>{{ DaoJS }}后重试</view>
					</view>
				</view>
				<view v-else>
					<view class="input-box" style="margin-bottom: 40rpx">
						<image src="/static/images/common/password.png"></image>
						<input type="text" password="true" v-model="password" maxlength="11" placeholder="请输入密码" placeholder-class="input-holder" />
					</view>
					<view class="input-box">
						<image src="/static/images/common/password.png"></image>
						<input type="text" password="true" v-model="password1" maxlength="11" placeholder="请再次输入密码" placeholder-class="input-holder" />
					</view>
				</view>
			</view>
		</view>
		<view class="login-btns" @tap="checkSMCode" :style="{ background: code ? '#FB353B' : '#EEF0F1' }">{{ btnName }}</view>
		<view class="login-tips" @tap="toLogin">其他方式登录</view>
		<!-- 隐私权限 -->
		<view class="yinsi-box">
			<radio-group @change="radioChange" name="xy">
				<radio color="#FB353B" value="1" :checked="xieyi">已阅读及同意</radio>
			</radio-group>
			<view class="xieyi-info">《栖木社》</view>
			<view class="xieyi-info">《登录政策》</view>
			<view class="xieyi-info">《隐私政策》</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			xieyi: 0,
			tab: 0, // 0:获取账号 1:重置密码
			Phone: '',
			code: '',
			password: '',
			password1: '',
			DaoJS: 0,
			IsDisabled: false,
			btnName: '下一步',
			captchaCode: '', // 图形验证码
			captchaImage: '', // 图形验证码图片
			captchaId: '' // 图形验证码ID
		};
	},
	onLoad() {
		this.GetCaptcha();
	},
	methods: {
		GetCaptcha(){
			var self = this;
			uni.request({
				url: self.Microi.ApiBase +'/api/Captcha/getCaptcha',
				method:'GET',  
				responseType: 'arraybuffer',
				data: {
					OsClient : self.Microi.OsClient
				}, 
				success: result => {
					console.log('result',result)
					if(result && result.header && result.header.captchaid){
						self.captchaId = result.header.captchaid;//一定要将返回的captchaid存储起来
					}
					var src = 'data:image/png;base64,' + uni.arrayBufferToBase64(result.data);
					self.captchaImage = src;
				},
				fail: (data, code) => {
				}
			});
		},
		async sendSmsCode() {
			var self = this;
			if (this.xieyi != 1) {
				self.Microi.Tips('请先同意隐私协议~', false);
				self.IsDisabled = false;
				return;
			}
			if (self.IsDisabled) {
				self.Microi.Tips('请勿重复点击', false);
				return;
			}
			self.IsDisabled = true;
			if (self.DaoJS) {
				self.Microi.Tips('请等待倒计时结束', false);
				self.IsDisabled = false;
				return;
			}
			if (!self.Phone || self.Phone.length != 11 || !/^1[3-9]\d{9}$/.test(self.Phone)) {
				self.Microi.Tips('请检查手机号', false);
				self.IsDisabled = false;
				return;
			}
			if (!self.captchaCode) {
				self.Microi.Tips('请输入图形验证码', false);
				self.IsDisabled = false;
				return;
			}

			var res = await self.Microi.ApiEngine.Run('send_sms_reg', {
				Phone: self.Phone,
				_CaptchaValue: self.captchaCode,
				_CaptchaId: self.captchaId
			});
			console.log(res, 'res');
			if (res.Code == 0) {
				self.Microi.Tips(res.Msg || '发送失败', false);
				self.IsDisabled = false;
				return;
			} else {
				self.DaoJS = 60;
				// 显示倒计时
				const interval = setInterval(() => {
					if (self.DaoJS > 0) {
						self.DaoJS--; // 每秒减少1
					} else {
						clearInterval(interval); // 倒计时结束，清除 interval
					}
				}, 1000); // 每1000毫秒（1秒）执行一次
			}
			self.IsDisabled = false;
		},
		toLogin() {
			uni.redirectTo({
				url: '/pages/common/login/login'
			});
		},

		async checkSMCode() {
			var self = this;
			if (this.xieyi != 1) {
				self.Microi.Tips('请先同意隐私协议~', false);
				self.IsDisabled = false;
				return;
			}
			if (self.IsDisabled) {
				self.Microi.Tips('请勿重复点击', false);
				return;
			}
			self.IsDisabled = true;
			if (self.tab == 0) {
				if (!self.Phone || self.Phone.length != 11 || !/^1[3-9]\d{9}$/.test(self.Phone)) {
					self.Microi.Tips('请检查手机号', false);
					self.IsDisabled = false;
					return;
				}
				if (!self.code) {
					self.Microi.Tips('请输入验证码', false);
					self.IsDisabled = false;
					return;
				}
				const checkSMcode = await self.Microi.ApiEngine.Run('check_smCode', {
					Phone: self.Phone,
					code: self.code
				});
				if (checkSMcode.Code != 1) {
					self.Microi.Tips(checkSMcode.Msg, false);
					self.IsDisabled = false;
					return;
				}

				self.IsDisabled = false;
				self.tab = 1;
			} else if (this.tab == 1) {
				if (!this.password) {
					this.Microi.Tips('请输入密码', false);
					self.IsDisabled = false;
					return;
				}
				if (!this.password1) {
					this.Microi.Tips('请再次输入密码', false);
					self.IsDisabled = false;
					return;
				}
				if (this.password != this.password1) {
					this.Microi.Tips('请检查两次输入是否相同', false);
					self.IsDisabled = false;
					return;
				}
				var res = await self.Microi.ApiEngine.Run('edit_password', {
					Phone: self.Phone,
					password: self.password,
					code: self.code
				});
				if (res.Code != 1) {
					this.Microi.Tips(res.Msg, false);
					self.IsDisabled = false;
					self.tab = 0;
					return;
				}
				this.Microi.Tips(res.Msg, false);
				setTimeout(function () {
					uni.reLaunch({
						url: '/pages/common/login/login'
					});
				}, 500);
			}
		},
		radioChange: function (e) {
			console.log(e, 'e');
			this.xieyi = e.detail.value;
		}
	}
};
</script>
<style>
.container {
}
.header-title {
	font-weight: 500;
	font-size: 64rpx;
	color: #333333;
	line-height: 75rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
	margin-bottom: 146rpx;
}
.header-title .tips {
	margin-top: 24rpx;
	font-weight: 500;
	font-size: 28rpx;
	color: #999999;
	line-height: 33rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.logo-box {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 30rpx;

	font-weight: bold;
	/* font-size: 48rpx; */
	color: #000;
	line-height: 56rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.logo-title {
	font-weight: 500;
	font-size: 32rpx;
	color: #000;
	line-height: 58rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.logo-img {
	width: 210rpx;
	height: 210rpx;
	border-radius: 16rpx;
}
.input-box {
	width: 664rpx;
	height: 92rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(10, 102, 194, 0.2);
	border-radius: 120rpx;
	opacity: 0.6;
	padding: 20rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.input-box image {
	width: 44rpx;
	height: 44rpx;
	margin-right: 18rpx;
}
.input-title {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	border-right: 2rpx solid #eeeeee;
	padding-right: 20rpx;

	font-weight: 500;
	font-size: 28rpx;
	color: #999999;
	line-height: 33rpx;
	font-style: normal;
	text-transform: none;
	text-align: left;
	margin-right: 20rpx;
}
input {
	text-align: left;
}
.input-title image {
	width: 44rpx;
	height: 44rpx;
}
.input-holder {
	font-weight: 500;
	font-size: 28rpx;
	color: #999999;
	line-height: 33rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.get_SMCode {
	width: 226rpx;
	height: 70rpx;
	background: #e9f2fa;
	border-radius: 130rpx;
	line-height: 70rpx;
	text-align: center;

	font-weight: bold;
	font-size: 28rpx;
	color: #FB353B;
	font-style: normal;
	text-transform: none;
}
.yinsi-box {
	position: fixed;
	bottom: 150rpx;
	margin: auto;
	width: 100vw;
	display: flex;
	align-items: center;
	justify-content: center;

	font-weight: 400;
	font-size: 24rpx;
	color: #666666;
	line-height: 28rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.xieyi-info {
	color: #FB353B;
}
.login-btns {
	width: 440rpx;
	height: 92rpx;
	background: #FB353B;
	border-radius: 130rpx 130rpx 130rpx 130rpx;

	font-weight: bold;
	font-size: 32rpx;
	color: #ffffff;
	line-height: 92rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;

	margin: auto;
	margin-top: 106rpx;
}
.login-tips {
	font-weight: 500;
	font-size: 28rpx;
	color: #FB353B;
	line-height: 33rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
	margin-top: 48rpx;
}
.captcha-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-right: 20rpx;
}
.captcha-image {
	width: 200rpx !important;
	height: 60rpx !important;
	border-radius: 8rpx !important;
	margin-left: 20rpx !important;
}
</style>
